{{ header }}
<div id="content">
  <div class="page-header">
    <div class="container">
      <div class="float-right">{{ language }}</div>
      <h1>{{ heading_title }}</h1>
    </div>
  </div>
  <div class="container">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fas fa-cogs"></i> {{ text_step_3 }}</div>
      <div class="card-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data">
          <fieldset>
            <legend>{{ text_db_connection }}</legend>
            <div class="row">
              <div class="col-md-4  order-md-2">
                <div class="alert alert-info">
                  <p>{{ text_help }}</p>
                  <ul class="text-info">
                    <li><strong><a href="https://docs.cpanel.net/cpanel/databases/mysql-databases/" target="_blank">{{ text_cpanel }}</a></strong></li>
                    <li><strong><a href="https://support.plesk.com/hc/en-us/articles/115004263014-How-to-create-a-database-in-Plesk" target="_blank">{{ text_plesk }}</a></strong></li>
                  </ul>
                </div>
              </div>
              <div class="col-md-8 order-md-1">
                <div class="form-row">
                  <div class="form-group col">
                    <label for="input-db-driver">{{ entry_db_driver }}</label> <select name="db_driver" id="input-db-driver" class="form-control" class="col-form-label">
                      {% for driver in drivers %}
                        {% if db_driver == driver.value %}
                          <option value="{{ driver.value }}" selected="selected">{{ driver.text }}</option>
                        {% else %}
                          <option value="{{ driver.value }}">{{ driver.text }}</option>
                        {% endif %}
                      {% endfor %}
                    </select>
                    {% if error_db_driver %}
                      <div class="text-danger">{{ error_db_driver }}</div>
                    {% endif %}
                  </div>
                  <div class="form-group col required">
                    <label for="input-db-hostname" class="col-form-label">{{ entry_db_hostname }}</label> <input type="text" name="db_hostname" value="{{ db_hostname }}" id="input-db-hostname" class="form-control"/>
                    {% if error_db_hostname %}
                      <div class="text-danger">{{ error_db_hostname }}</div>
                    {% endif %}
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col required">
                    <label for="input-db-username" class="col-form-label">{{ entry_db_username }}</label> <input type="text" name="db_username" value="{{ db_username }}" id="input-db-username" class="form-control"/>
                    {% if error_db_username %}
                      <div class="text-danger">{{ error_db_username }}</div>
                    {% endif %}
                  </div>
                  <div class="form-group col">
                    <label for="input-db-password" class="col-form-label">{{ entry_db_password }}</label> <input type="password" name="db_password" value="{{ db_password }}" id="input-db-password" class="form-control"/>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-6 required">
                    <label for="input-db-database" class="col-form-label">{{ entry_db_database }}</label> <input type="text" name="db_database" value="{{ db_database }}" id="input-db-database" class="form-control"/>
                    {% if error_db_database %}
                      <div class="text-danger">{{ error_db_database }}</div>
                    {% endif %}
                  </div>
                  <div class="form-group col-3">
                    <label for="input-db-prefix" class="col-form-label">{{ entry_db_prefix }}</label> <input type="text" name="db_prefix" value="{{ db_prefix }}" id="input-db-prefix" class="form-control"/>
                    {% if error_db_prefix %}
                      <div class="text-danger">{{ error_db_prefix }}</div>
                    {% endif %}
                  </div>
                  <div class="form-group col-3 required">
                    <label for="input-db-port" class="col-form-label">{{ entry_db_port }}</label> <input type="text" name="db_port" value="{{ db_port }}" id="input-db-port" class="form-control"/>
                    {% if error_db_port %}
                      <div class="text-danger">{{ error_db_port }}</div>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ text_db_administration }}</legend>
            <div class="form-row">
              <div class="form-group col required">
                <label for="input-username" class="col-form-label">{{ entry_username }}</label> <input type="text" name="username" value="{{ username }}" id="input-username" class="form-control"/>
                {% if error_username %}
                  <div class="text-danger">{{ error_username }}</div>
                {% endif %}
              </div>
              <div class="form-group col required">
                <label for="input-password" class="col-form-label">{{ entry_password }}</label> <input type="text" name="password" value="{{ password }}" id="input-password" class="form-control"/>
                {% if error_password %}
                  <div class="text-danger">{{ error_password }}</div>
                {% endif %}
              </div>
            </div>
            <div class="form-group required">
              <label for="input-email" class="col-form-label">{{ entry_email }}</label> <input type="text" name="email" value="{{ email }}" id="input-email" class="form-control"/>
              {% if error_email %}
                <div class="text-danger">{{ error_email }}</div>
              {% endif %}
            </div>
          </fieldset>
          <div class="row mt-3">
            <div class="col"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
            <div class="col text-right"><input type="submit" value="{{ button_continue }}" class="btn btn-primary"/></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{{ footer }}